<template>
	<view class="mine">
		<tabBar></tabBar>
		<view class="user-info" :style="{ 'margin-top': distanceY }">
			<navigator url="personal/personal" class="avator"><image v-if="userInfo" :src="userInfo.avatar" mode=""></image></navigator>
			<view class="info">
				<view class="unlogin" v-if="!userInfo">
					<text>hi~</text>
					<text>您还没有登录呢</text>
				</view>
				<view class="unlogin login" v-else>
					<text class="username">{{ userInfo.nickname }}</text>
					<text class="nickname">用户名：{{ userInfo.username }}</text>
				</view>
			</view>
		</view>
		<view class="login-box" v-if="!userInfo">
			<navigator url="register/register" class="register">注册</navigator>
			<navigator url="login/login" class="login">登录</navigator>
		</view>
		<view class="order">
			<view class="order-t">
				<text>我的订单</text>
				<image src="../../static/image/icons/arr-r-1.png" mode=""></image>
			</view>
			<view class="order-c">
				<navigator  url="../order/orderList/orderList?type=0" class="service">
					<image src="../../static/image/icons/icon-pay.png" mode=""></image>
					<view>代收款</view>
				</navigator>
				<navigator url="../order/orderList/orderList?type=1" class="service">
					<image src="../../static/image/icons/icon-pay.png" mode=""></image>
					<view>已付款</view>
				</navigator>
				<navigator url="../order/orderList/orderList?type=2" class="service">
					<image src="../../static/image/icons/icon-car.png" mode=""></image>
					<view>待收货</view>
				</navigator>
				<navigator url="../order/orderList/orderList?type=3" class="service">
					<image src="../../static/image/icons/icon-done.png" mode=""></image>
					<view>已收货</view>
				</navigator>
				<navigator url="../order/orderList/orderList?type=9" class="service">
					<image src="../../static/image/icons/icon-back.png" mode=""></image>
					<view>售后</view>
				</navigator>
			</view>
		</view>
		<view class="option">
			<navigator url="collect/collect" class="option-item">
				<image src="../../static/image/icons/save.png" mode=""></image>
				<view class="">收藏</view>
			</navigator>
			<view class="option-item">
				<image src="../../static/image/icons/brand.png" mode=""></image>
				<view class="">品牌</view>
			</view>
			<view class="option-item">
				<image src="../../static/image/icons/article.png" mode=""></image>
				<view class="">文章</view>
			</view>
			<navigator url="address/address" class="option-item">
				<image src="../../static/image/icons/address.png" mode=""></image>
				<view class="">地址</view>
			</navigator>
			<view class="option-item">
				<image src="../../static/image/icons/card.png" mode=""></image>
				<view class="">卡包</view>
			</view>
			<navigator url="../cart/cart" class="option-item">
				<image src="../../static/image/icons/cart2.png" mode=""></image>
				<view class="">购物车</view>
			</navigator>
			<view class="option-item">
				<image src="../../static/image/icons/kf.png" mode=""></image>
				<view class="">客服</view>
			</view>
		</view>
	</view>
</template>
<script>
import tabBar from '@/components/TabBar/TabBar.vue';
import mixin from '@/mixins/index.js';
export default {
	mixins: [mixin],
	data() {
		return {
			distanceY: uni.getStorageSync('distanceY') || 0,
			userInfo: null
		};
	},
	components: {
		tabBar
	},
	onShow() {
		let userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			this.userInfo = userInfo;
		} else {
			this.userInfo = null;
		}
		// if (!userInfo) {
		// 	uni.showModal({
		// 		title: '登录提示',
		// 		content: '您尚未登录，需要登录才可以查看',
		// 		success: function(res) {
		// 			if (res.confirm) {
		// 				uni.navigateTo({
		// 					url:'/pages/mine/login/login'
		// 				})
		// 			} else if (res.cancel) {
		// 				// console.log('用户点击取消');
		// 			}
		// 		}
		// 	});
		// }
	}
};
</script>

<style lang="scss">
@import '../../static/scss/mixin.scss';
.mine {
	width: 100vw;
	background-color: #f1ece7;
	box-sizing: border-box;
	padding: 0 40rpx 50rpx;
	.user-info {
		box-sizing: border-box;
		// padding-left: 40rpx;
		padding: 80rpx 0;
		// padding: 80rpx 0 80rpx 40rpx;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		.avator {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #edf6fd;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
		}
		.info {
			height: 100%;
			margin-left: 32rpx;
			.login {
				.username {
					font-size: 50rpx;
					font-weight: 600;
				}
				.nickname {
					font-size: 26rpx;
					font-weight: normal;
					color: #999;
				}
			}
			.unlogin {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				text {
					font-size: 28rpx;
					color: #3d4c46;
					letter-spacing: 2rpx;
					font-weight: bolder;
				}
			}
		}
	}
	.login-box {
		display: flex;
		// height: 76rpx;
		// padding: 50rpx 0;
		margin-top: 52rpx;
		padding-bottom: 50rpx;
		justify-content: center;
		align-items: center;
		.register,
		.login {
			width: 182rpx;
			height: 76rpx;
			border: 2rpx solid #3d4c46;
			border-radius: 10rpx;
			@include cen;
			font-size: 30rpx;
			color: #3d4c46;
			letter-spacing: 2.14rpx;
			font-weight: bolder;
			// margin-bottom: 120rpx;
		}
		.login {
			background-color: #354e44;
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 60rpx;
		}
	}
	.order {
		width: 100%;
		background: #ffffff;
		box-shadow: 0 16rpx 24rpx 0 rgba(122, 98, 75, 0.04);
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 0 56rpx;
		.order-t {
			width: 100%;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #3e3e3e;
			letter-spacing: 1.86rpx;
			border-bottom: 1px solid #f5f5f5;
			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
		.order-c {
			display: flex;
			justify-content: space-between;
			margin-top: 25rpx;
			.service {
				width: 20%;
				text-align: center;
				image {
					width: 41rpx;
					height: 35rpx;
				}
				view {
					margin: 14rpx 0 23rpx;
					font-size: 26rpx;
					color: #3e3e3e;
					letter-spacing: 1.86rpx;
				}
			}
		}
	}
	.option {
		margin-top: 50rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 10rpx;
		.option-item {
			margin-top: 63rpx;
			width: 33.33%;
			text-align: center;
			&:nth-last-child(-n + 3) {
				margin-bottom: 63rpx;
			}
			image {
				width: 49rpx;
				height: 54rpx;
			}
			view {
				margin-top: 23rpx;
				font-size: 26rpx;
				color: #3e3e3e;
				letter-spacing: 1.86rpx;
			}
		}
	}
}
</style>
